@import '../Pisces/_layout';
@import '../Pisces/_header';
@import '../Pisces/_menu';
@import '../Pisces/_sub-menu';
@import '../Pisces/_sidebar';

// ==================================================
// Rewrite _layout.styl
// ==================================================
// Sidebar padding used as main desktop content padding for sidebar padding and post blocks padding too.

// In `source/css/_variables/Pisces.styl` there are variable for main offset:
// $sidebar-offset                   = 12px;
// This value alse can be changed in main NexT config as `sidebar: offset: 12` option.

// In `source/css/_variables/base.styl` there are variables for other resolutions:
// $content-tablet-padding           = 10px;
// $content-mobile-padding           = 8px;
// P.S. If u want to change this paddings u may set this variables into `custom_file_path.variable` (in theme _config.yml).

// So, it will 12px in Desktop, 10px in Tablets and 8px in Mobiles for all possible paddings.
// ==================================================
// Read values from NexT config and set they as local variables to use as string variables (in any CSS section).
$use-seo = hexo-config('seo');

// ==================================================
// Desktop layout styles.
// ==================================================
// Post blocks.
.content-wrap {
  background: initial;
  box-shadow: initial;
  padding: initial;
}

// Post & Comments blocks.
.post-block {
  background: white;
  border-radius: $border-radius-inner;
  // box-shadow: $box-shadow-inner;
  padding: $content-desktop-padding;
  transition: all 0.4s ease-in 0s;
  
}

// When blocks are siblings (homepage).
.post-block + .post-block {
  border-radius: $border-radius;
  // Rewrite shadows & borders because all blocks have offsets.
  // box-shadow: $box-shadow;
  margin-top: $sidebar-offset;
}

// Comments blocks.
.comments {
  background: white;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  margin: auto;
  margin-top: $sidebar-offset;
  padding: $content-desktop-padding;
}

.tabs-comment {
  margin-top: 1em;
}

// Top main padding from header to posts (default 40px).
.posts-expand {
  padding-top: initial;
}

// Post delimiters.
.post-eof {
  display: none;
}

// Pagination.
.pagination {
  .prev, .next, .page-number {
    margin-bottom: initial;
    top: initial;
  }

  background: white;
  border-radius: $border-radius;
  border-top: initial;
  box-shadow: $box-shadow;
  margin: $sidebar-offset 0 0;
  padding: 10px 0 10px;
}

// Footer alignment.
.main {
  padding-bottom: initial;
}

.footer {
  bottom: auto;
}

// Sub-menu(s).
.sub-menu {
  border-bottom: initial;
  box-shadow: $box-shadow-inner;

  // Adapt submenu(s) with post-blocks.
  + .content .post-block {
    box-shadow: $box-shadow;
    margin-top: $sidebar-offset;

    +tablet() {
      margin-top: $content-tablet-padding;
    }

    +mobile() {
      margin-top: $content-mobile-padding;
    }
  }
}

// ==================================================
// Headers.
// ==================================================
.post-body {
  h1, h2 {
    border-bottom: 1px solid $body-bg-color;
  }

  h3 {
    if ($use-seo) {
      border-bottom: 1px solid $body-bg-color;
    } else {
      border-bottom: 1px dotted $body-bg-color;
    }
  }

  h4 {
    if ($use-seo) {
      border-bottom: 1px dotted $body-bg-color;
    }
  }
}

// ==================================================
// > 768px & < 991px
// ==================================================
+tablet() {
  // Posts in blocks.
  .content-wrap {
    padding: $content-tablet-padding;
  }

  .posts-expand {
    margin: initial;

    // Components inside Posts.
    .post-button {
      margin-top: ($content-tablet-padding * 2);
    }
  }

  .post-block {
    border-radius: $border-radius;
    // Rewrite shadows & borders because all blocks have offsets.
    // box-shadow: $box-shadow;
    // Inside posts blocks content padding (default 40px).
    padding: ($content-tablet-padding * 2);
  }

  // Only if blocks are siblings need bottom margin (homepage).
  .post-block + .post-block {
    margin-top: $content-tablet-padding;
  }

  .comments {
    margin-top: $content-tablet-padding;
    padding: $content-tablet-padding ($content-tablet-padding * 2);
    // padding: initial;
    // padding-top: $content-tablet-padding;
  }

  .pagination {
    margin: $content-tablet-padding 0 0;
  }
}

// ==================================================
// < 767px
// ==================================================
+mobile() {
  // Posts in blocks.
  .content-wrap {
    padding: $content-mobile-padding;
  }

  .posts-expand {
    margin: initial;

    // Components inside Posts.
    .post-button {
      margin: $sidebar-offset 0;
    }
  }

  .post-block {
    border-radius: $border-radius;
    // Rewrite shadows & borders because all blocks have offsets.
    // box-shadow: $box-shadow;
    min-height: auto;
    // Inside posts blocks content padding (default 40px).
    padding: $sidebar-offset;
  }

  // Only if blocks are siblings need bottom margin (homepage).
  .post-block + .post-block {
    margin-top: $content-mobile-padding;
  }

  .comments {
    margin-top: $content-mobile-padding;
    padding: 10px $sidebar-offset;
  }

  .pagination {
    margin: $content-mobile-padding 0 0;
  }
}

// 头图壁纸区域
.site-brand-big {
    position: relative;
    height: 400px;
    width: 100%;
    color: rgba(255,255,255,0.8);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    // background-image: url(https://www.z4a.net/images/2020/01/26/15800361381.png); 
    background-image: url(http://imgg.cookcloud.club/ipicimagec14e66d1df145b98.png);     
    font-family: 'Sigmar One';
    +tablet-mobile() {
      top: -9px;
      position: absolute;
      height: 180px;
    }
  }
.site-brand-title .animate:hover, .guide:hover {
    opacity: .6;
}
.site-brand-title .animate, .guide {
    font-size: 100px; height: 100px; line-height: 100px;
    +tablet-mobile() {
      font-size: 40px;
      height: 40px;
      line-height: 60px;
    }
  }
.site_toto {
    text-align: center;
    width: 70%;
    margin: auto;
    top: -90px;
    padding: 40px 0;
    padding-bottom: 40px;
    font-size: 16px;
    opacity: .98;
    background: rgba(230,244,249,.7);
    z-index: 1;
    animation: b 1s ease-out;
    position: relative;
    border-radius: 5px;
    margin-bottom: -70px;
      +tablet-mobile() {
          display: none;
        }
  }
.site_master_avatar {
    width: 100px;
    height: 100px;
    border-radius: 100%;
  }

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    10%,20% {
        -webkit-transform: scale(.9) rotate(-3deg);
        -webkit-transform: scale(.9) rotate(-3deg);
        -moz-transform: scale(.9) rotate(-3deg);
        -ms-transform: scale(.9) rotate(-3deg);
        -o-transform: scale(.9) rotate(-3deg);
        transform: scale(.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        -webkit-transform: scale(1.1) rotate(3deg);
        -moz-transform: scale(1.1) rotate(3deg);
        -ms-transform: scale(1.1) rotate(3deg);
        -o-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        -webkit-transform: scale(1.1) rotate(-3deg);
        -moz-transform: scale(1.1) rotate(-3deg);
        -ms-transform: scale(1.1) rotate(-3deg);
        -o-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        -webkit-transform: scale(1) rotate(0);
        -moz-transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0);
        -o-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

.site_master_avatar:hover {
   animation-name: tada;
   animation-duration: .9s;
   animation-timing-function:ease-in;
   animation-iteration-count: 1;
}
.site_master_description {
    font-size: 18px;
    font-weight: 700;
    margin: 20px 0 0;
  }

// 列表伸缩控制开关

.testswitch {
    position: relative;
    float: left; 
    width: 90px;
    margin: 0;
    margin-top:-13px;
    margin-bottom: 9px;
    margin-left:10%;
    -webkit-user-select:none; 
    -moz-user-select:none; 
    -ms-user-select: none;
    +mobile() {
      margin-top:-20px;
      margin-bottom: 1px;
      position: absolute;
      width: 100%;
      background-color: black;
      left: -42px;
      // z-index: 1000;
    }
}
 
.testswitch-checkbox {
    display: none;
}
 
.testswitch-label {
    display: block; 
    overflow: hidden; 
    cursor: pointer;
    border: 2px solid #999999; 
    border-radius: 20px;
    +mobile() {
      border-radius: 0px;
    }
}
 
.testswitch-inner {
    display: block; 
    width: 200%; 
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
 
.testswitch-inner::before, .testswitch-inner::after {
    display: block; 
    float: right; 
    width: 50%; 
    height: 20px; 
    padding: 0; 
    line-height: 20px;
    font-size: 14px; 
    color: white; 
    font-family: 
    Trebuchet, Arial, sans-serif; 
    font-weight: bold;
    box-sizing: border-box;
}
 
.testswitch-inner::after {
    content: attr(data-on);
    padding-left: 10px;
    background-color: #00e500; 
    color: #FFFFFF;
}
 
.testswitch-inner::before {
    content: attr(data-off);
    padding-right: 10px;
    background-color: #EEEEEE; 
    color: #999999;
    text-align: right;
}
 
.testswitch-switch {
    position: absolute; 
    display: block; 
    width: 19px;
    height: 19px;
    margin: 1px;
    background: #FFFFFF;
    top: 0; 
    bottom: 0;
    right: 64px;
    border: 2px solid #999999; 
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
 
.testswitch-checkbox:checked + .testswitch-label .testswitch-inner {
    margin-left: 0;
}
 
.testswitch-checkbox:checked + .testswitch-label .testswitch-switch {
    right: 0px; 
}